var domian ="https://www.easy-mock.com/mock/5aa77cbf2b0894377fc76640";
function ajax(method,url,data){
	var xhr = new XMLHttpRequest();
	xhr.open(method,url);
	xhr.setRequestHeader("projectname","qq_music");
	xhr.send(data);
	xhr.addEventListener("readystatechange",function(){
		if(xhr.status==200&&xhr.readyState==4){
			add(xhr.response);
			
		}		
	})
}
ajax("GET",domian+"/song_list");
function add(res){
	var res = JSON.parse(res);
	var slider = res.data.slider;
	var template = "";
	var oul = document.querySelector(".pic_box")
	slider.forEach(function(el){
		template+=`<li>
		<a href="${el.linkUrl}">
		<img src="${el.picUrl}?max_age=2592000" />
		</a> 
		</li>
		`
	});
	oul.innerHTML+=template;	
	new lunbo(".carousel_wrap", 144 / 360);
	//电台
	var radioList=res.data.radioList;
	var template2 = "";
	var cpul2 = document.createDocumentFragment("ul");
	var oul2 = document.querySelector(".radio_ul");
	cpul2=oul2;
	radioList.forEach(function(el){
		template2+=`<li data-id="${el.radioid}"><a href="">
								<div class="radio_pic same_pic_box">
									<img src="${el.picUrl}"/>
									<span class="icon icon_play"></span>
								</div>
								<div class="radio_h3_title">
									<h3>
										${el.Ftitle}
									</h3>
								</div>
							</a></li>
		`
	});	
	cpul2.innerHTML+=template2;	
	//歌单
	var songList=res.data.songList;
	var template3 = "";
	var cpul3 = document.createDocumentFragment("ul");
	var oul3 = document.querySelector(".song_ul");
	cpul3=oul3;
	songList.forEach(function(el){
		template3+=`<li>
							<a href="">
								<div class="song_pic same_pic_box">
									<img src="${el.picUrl}"/>
									<span class="listen_count">
										<i class="icon icon_listen"></i>
										${el.accessnum}
									</span>
									<span class="icon icon_play"></span>
								</div>
								<div class="song_h3_title">
									<h3>
										${el.songListDesc}
									</h3>
									<p>${el.songListAuthor}</p>
								</div>
							</a>
						</li>
		`
	});	
	cpul3.innerHTML+=template3;	
}

